<template>
  <div>
    <el-card class="oneCard" style="cursor: auto" @click.native="jump">
      <div :class="[clazz]">
        <div>
          <h1>{{ title }}</h1>
        </div>
        <div>
          <el-link class="animate" :type="type" :underline="false">{{ total }}（{{ unit }}）</el-link>
        </div>
        <div class=""><svg-icon :icon-class="icon" /></div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'OneCard',
  props: {
    title: {
      required: false,
      type: String,
      default: '--'
    },
    total: {
      required: false,
      type: Number,
      default: 0
    },
    unit: {
      required: false,
      type: String,
      default: '个'
    },
    icon: {
      required: false,
      type: String,
      default: 'fixed'
    },
    clazz: {
      required: false,
      type: String,
      default: 'purple'
    }
  },
  data() {
    return {
      type: 'warning'
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  methods: {
    jump() {
    }
  }
}
</script>

<style lang="scss" scoped>
  .oneCard {
    .purple {
      a {
        color: #5C5FF8!important;
        font-size: 20px;
        font-weight: bold;
        margin-top: 7%;
      }
      h1 {
        color: #5C5FF8!important;
        font-size: 20px;
        font-weight: bold;
        align-content: left;
        margin-top: 2.8%;
        margin: 2%;
      }
    }
    .darkgreen {
      a {
        color: #689835!important;
        font-size: 20px;
        font-weight: bold;
        margin-top: 4%;
      }
      h1 {
        color: #689835!important;
        font-size: 20px;
        font-weight: bold;
        align-content: left;
        margin-top: 2.8%;
      }
    }
    .animate {
      white-space: nowrap;
      animation: 3s bounce linear infinite normal;
      transition: all 5s ease-in-out;
      transform: translateY(-40px);
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }
    @keyframes bounce {
      from,
      20%,
      53%,
      80%,
      to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
      }
      40%,
      43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0);
      }
      70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0);
      }
      90% {
        transform: translate3d(0, -4px, 0);
      }
    }
  }
</style>
